<!-- 管理员:课程考核管理:题库和在线考试管理:在线考试:查看考试 -->
<template>
  <div style="width:100% !important;padding:20px;">
    <div>
      <el-row type="flex"
              align="middle">
        <el-form inline="true"
                 label-suffix="：">
          <el-form-item label="学期">
            <el-select v-model="queryForm.semester"
                       size="mini"
                       placeholder="请选择"
                       style="width:100px;">
              <el-option v-for="item in semesterArray"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="系">
            <el-select v-model="queryForm.semester"
                       size="mini"
                       placeholder="请选择"
                       style="width:100px;">
              <el-option v-for="item in semesterArray"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryForm.semester"
                       size="mini"
                       placeholder="请选择"
                       style="width:100px;">
              <el-option v-for="item in semesterArray"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考试课程">
            <el-input size="mini" />
          </el-form-item>
          <el-form-item>
            <el-button plain
                       size='mini'
                       icon="el-icon-search"
                       type="primary"
                       style="width:70px;">查询</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table :data="tableData"
                border
                class="table-data"
                row-class-name="dun-row-class"
                cell-class-name="dun-cell-class"
                header-row-class-name="dun-header-row-class"
                header-cell-class-name="dun-header-cell-class"
                :cell-style="{ borderColor: '#004ca7'}"
                :header-cell-style="{ borderColor: '#004ca7', backgroundColor: '#eef1f9'}">
        <el-table-column type="selection"
                         width="55"
                         align="center" />
        <el-table-column prop="clazzName"
                         label="姓名"
                         align="center" />
        <el-table-column prop="clazzName"
                         label="学号"
                         align="center" />
        <el-table-column prop="clazzName"
                         label="培养层次"
                         align="center" />
        <el-table-column prop="clazzName"
                         label="班级"
                         align="center" />
        <el-table-column prop="clazzName"
                         label="考试课程"
                         align="center" />
        <el-table-column prop="clazzName"
                         label="考试状态"
                         align="center" />
        <el-table-column prop="clazzName"
                         label="试卷类型"
                         align="center" />
        <el-table-column prop="clazzName"
                         label="试卷编号"
                         align="center" />
        <el-table-column prop="clazzName"
                         label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button :plain=true
                       @click="onBtnMarkingClickHandler()"
                       size="mini"
                       type="warning"
                       style="width:80px;height:28px;"
                       icon="el-icon-edit">阅 卷</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagineDescPane">
        <el-button plain
                   style="height:28px;"
                   type="warning"
                   icon="el-icon-upload2"
                   size="mini">导出 Excel</el-button>
      </div>
      <div class="pagineDescPane">
        当前共找到 {{ resultPagin.totalCount }} 条记录，当前显示 {{ resultPagin.start }} - {{ resultPagin.end }} 条。
      </div>
      <div class="pagineBtnPane">
        <el-button style="width:80px;"
                   size='mini'>＜ 上一页</el-button>
        <el-button size='mini'>1</el-button>
        <el-button size='mini'>…</el-button>
        <el-button size='mini'>30</el-button>
        <el-button size='mini'>…</el-button>
        <el-button size='mini'>60</el-button>
        <el-button style="width:80px;"
                   size='mini'>下一页 ＞</el-button>
        <span style="display:inline-block;width:40px;"></span>
        前往
        <el-input size='mini'
                  style="display:inline-block;width:40px;" /> 页
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      semesterArray: [
        { label: '2021下', value: '2021下' },
        { label: '2022上', value: '2022上' },
      ],
      queryForm: {
        semester: '',
      },
      resultPagin: {
        totalCount: 200,
        currentPage: 3,
        perPageCount: 50,
        start: 51,
        end: 100,
      },
      tableData: [{}, {}, {}],
    }
  },
  methods: {
    onBtnMarkingClickHandler: function () {
      this.$router.push({
        path: '/admin/courseAssessment/questionExamination/onlineTest/marking',
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import './courseAssessment.less';
</style>

<style lang="less" scoped>
.pagineDescPane {
  padding: 10px 0px 0px 0px;
  font-size: 14px;
  font-weight: normal;
  font-family: 'Microsoft YaHei';
  color: #004ca7;
}
.pagineBtnPane {
  text-align: center;
  padding: 10px;
  font-size: 14px;
  font-weight: normal;
  font-family: 'Microsoft YaHei';
  color: #004ca7;
}
.pagineBtnPane > button {
  color: #004ca7;
  width: 30px;
  height: 28px;
  padding-left: 0px;
  padding-right: 0px;
  border: 1px solid #004ca7;
}
</style>